@import "keyframes";
.main-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.title {
  opacity: 0;
  width: 18.5rem;
  margin-bottom: 1rem;
  animation: fly-in-left 0.8s ease 1.2s forwards;
  img {
    width: 11.17rem;
  }
}
.page-title {
  width: 11.17rem;
  margin-bottom: 0.5rem;
}
.button-group {
  display: flex;
  width: 18.5rem;
  margin-top: 0.5rem;
  justify-content: start;
  .button {
    opacity: 0;
    animation: fade-in 0.8s ease 1.5s forwards;
  }
}
.table {
  width: 18.5rem;
  display: flex;
  justify-content: space-between;
  .rectangle {
    opacity: 0;
    width: 5.57rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    .floor-img {
      z-index: 10;
      position: relative;
    }
    &-tip {
      top: 1rem;
      left: 50%;
      opacity: 0;
      width: 4.85rem;
      position: absolute;
      transform: translateX(-50%);
      img {
        transform: translateX(-50%);
      }
    }
    &.r1{
      animation: fly-in-left 0.8s ease 0.5s forwards;
    }
    &.r2{
      animation: fly-in-left 0.8s ease 1.5s forwards;
    }
    &.r3{
      animation: fly-in-left 0.8s ease 2.2s forwards;
    }
  }
}
.table-container {
  //justify-content: start;
}
.table-container .desc {
  //right: 1.9rem;
  opacity: 0;
  //bottom: 1.9rem;
  width: 18.5rem;
  //position: absolute;
  animation: fly-in-left 0.8s ease 2.1s forwards;
  img {
    width: 14.06rem;
  }
}

.popup_container {
  padding: 0.5rem;
  position: relative;
  border-radius: 0.4rem;
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 18.08rem !important;
  &__title {
    width: 17.08rem;
    img {
      width: 15.45rem;
    }
  }
  &__table {
    width: 17.08rem;
    position: relative;
    margin: 0.5rem auto;
    &-frame {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
    }

    &.table {
      //opacity: 0;
      //width: 18.51rem;
      //height: 9.52rem;
      //position: relative;
      //background-size: 100% auto;
      //background-position: center;
      //background-repeat: no-repeat;
      //animation: fade-in 0.8s ease forwards;
      //background-image: url("../images/page11/table-bg.png");

      &.t2 {
        //height: 9.52rem;
        background-image: url("../images/page11/table-bg2.png");
      }

      .column-view {
        top: 1.55rem;
        left: 3.48rem;
        right: 2.6rem;
        bottom: 0.73rem;
        display: flex;
        align-items: end;
        position: absolute;
        justify-content: space-between;
        .column {
          opacity: 1;
          //height: 100%;
          width: 1.20rem;
          position: relative;
          transition: height 0.8s ease, opacity 0.5s ease;
          & .tip {
            left: 50%;
            top: 0rem;
            width: 1.23rem;
            position: absolute;
            transform: translate3d(-50%, -100%, 0);
          }
          &:before{
            top: 0;
            left: 50%;
            content: "";
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            background-color: #D0ECF9;
            transform: translate3d(-50%, -50%, 0) rotate(45deg);
          }
          &:nth-child(1) {
            background-color: #c065ba;
            & .tip {
              width: 1.85rem;
            }
          }
          &:nth-child(2) {
            background-color: #00c7dd;
          }
          &:nth-child(3) {
            background-color: #7e81d2;
          }
          &:nth-child(4) {
            background-color: #f9c851;
          }
          &:nth-child(5) {
            background-color: #c4c4c4;
          }
        }
      }
    }
  }
  &__subtitle {
    width: 17.08rem;
    img {
      width: 15.31rem;
    }
  }
}
